<template>
	<view class="index w-full flex flex-col items-center">
		<view class="m-auto flex items-center" >
			<view style="max-width:650px">
				<view class="text-6xl" style="line-height: 80px;">{{$t('index.title')}}</view>
				<view class="text-xl py-8">{{$t('index.sutitle')}}</view>
			</view>
			<view style="width: 590px;height: 660px;" class="animate">
				<image src="/static/images/home/1.svg" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<view class="w-full relative my-7" style="background: linear-gradient(to right, #2266F4,#F5597A);height: 140rpx;">
			<view class="homeList-animate absolute flex left-0 top-0 h-full items-center gap-40">
				<view v-for="(item,index) in homeList">
					<view class="flex text-nowrap text-2xl">{{item.pair}}
						<view style="color: red;">（{{item.increaseStr}}）</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="rounded-xl p-4" style="border: 3px solid #5c5c5c;color: #888894;width: 1200px;background-color: #000;">
			<view style="background-color: #242E3C;">
				<view class="flex cursor-pointer" style="height: 60px;">
					<view class="flex items-center px-4 py-2 gap-1" :class="{activeBtn:item.id==table.active}" v-for="(item,index) in table.btns" :key="index" @click="clickBtn(item,index)">
						<template v-if="index==0">
							<uni-icons type="star-filled" size="30"></uni-icons>
						</template>
						<template v-else>
							<image :src="item.icon" style="width: 25px;height: 25px;"></image>
						</template>
						{{item.name}}
					</view>
				</view>
				<view class="flex justify-between w-full items-center border-b" style="height: 50px;background-color: #212833;border-color: #5c5c5c;">
					<view class="text-center flex-1"></view>
					<view class="text-center flex-1">{{$t('index.jiaoyidui')}}</view>
					<view class="text-center flex-1">{{$t('bibi.jiage')}}</view>
					<view class="text-center flex-1">{{$t('bibi.zhangdiefu')}}</view>
					<view class="text-center flex-1">{{$t('bibi.jiaoyi')}}</view>
				</view>
				<view class="flex justify-between w-full items-center table-row" :class="{tableBg:index%2==0}" v-for="(item,index) in table.list" :key="index" style="height: 70px;">
					<view class="text-left flex-1">
						<uni-icons type="star-filled" size="30" class="ml-4" color="#fff"></uni-icons>
					</view>
					<view class="text-center flex-1 text-white">{{item.jiaoyi}}</view>
					<view class="text-center flex-1">{{item.jiage}}</view>
					<view class="text-center flex-1">{{item.zdf}}</view>
					<view class="text-center flex-1">
						<view class="border rounded-full py-1 px-4 m-auto" style="border-color: #2266F4;width: 200rpx;">{{$t('index.goumai')}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="py-8">
			<view class="px-8 py-2 rounded-md cursor-pointer chakangengd" style="border:1px solid rgb(146, 146, 170);">
				{{$t('index.chakangengduo')}}
			</view>
		</view>
		
		<view class="flex flex-col items-center" style="margin-top: 150px;width: 1200px;">
			<view class="text-5xl">{{$t('index.pingtai')}}</view>
			<view style="margin-top: 20px;font-size: 20px;">{{$t('index.wmxx')}}</view>
			<view class="line rounded-full m-auto mt-2"></view>
			<view class="flex mt-8 w-full justify-between">
				<image src="/static/images/home/2.png" style="width: 583px; height: 447px;"></image>
				<view style="width: 474px; height: 447px;">
					<view class="flex text-2xl gap-2 items-center">
						<uni-icons type="eye" size="40" color="#2266F4"></uni-icons>{{$t('index.qingxi')}}
					</view>
					<view class="mt-1">
						{{$t('index.wmbangzhu')}}
					</view>
					<view class="flex mt-16 text-2xl gap-1">
						<image src="/static/images/home/4.svg" style="width: 40px;height: 40px;"></image>{{$t('index.anquan')}}
					</view>
					<view class="mt-1">
						{{$t('index.aqscfk')}}
					</view>
					<view class="flex mt-16 text-2xl gap-1">
						<image src="/static/images/home/3.svg" style="width: 40px;height: 40px;"></image>{{$t('index.bianjie')}}
					</view>
					<view class="mt-1">
						{{$t('index.yjjycz')}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex flex-col items-center" style="margin-top: 150px;width: 1200px;">
			<view class="mt-1 text-5xl px-5 mt-7 text-center">
				{{$t('index.zdxldjm')}}
			</view>
			<view style="margin-top: 20px;font-size: 20px;">{{$t('index.dzgnsq')}}</view>
			<view class="line rounded-full m-auto mt-2"></view>
			<view class="flex justify-between mt-4">
				<view class="flex flex-col justify-center items-center py-4 flex-1">
					<image src="/static/images/home/5.png" style="width: 200rpx;height: 200rpx;"></image>
					<view class="text-2xl mt-4">
						{{$t('index.tzzhjl')}}
					</view>
					<view class="px-4 text-center mt-2">
						{{$t('index.gmhcslx')}}
					</view>
				</view>
				<view class="flex flex-col justify-center items-center py-4 flex-1">
					<image src="/static/images/home/6.png" style="width: 200rpx;height: 200rpx;"></image>
					<view class="text-2xl mt-4">
						{{$t('index.bxkbh')}}
					</view>
					<view class="px-7 text-center mt-2">
						{{$t('index.wlzjaqx')}}
					</view>
				</view>
				<view class="flex flex-col justify-center items-center py-4 flex-1">
					<image src="/static/images/home/7.png" style="width: 200rpx;height: 200rpx;"></image>
					<view class="text-2xl mt-4">
						{{$t('index.xdyycx')}}
					</view>
					<view class="px-7 text-center mt-2">
						{{$t('index.sysyy')}}
					</view>
				</view>
			</view>
			<view class="mt-4">
				<el-button type="primary" color="#2266F4">{{$t('login.lijizhuce')}}</el-button>
			</view>
		</view>
		
		<view class="flex flex-col items-center" style="margin-top: 150px;width: 1200px;">
			<view class="mt-1 text-5xl px-5 text-center">
				{{$t('index.sssdjl')}}
			</view>
			<view class="px-5 text-xl text-center mt-4">
				{{$t('index.nkdldqd')}}
			</view>
			<view class="line rounded-full m-auto mt-2"></view>
			<view class="pt-30 flex justify-between">
				<view style="width: 480px;">
					<image :src="sysConfig.logo" style="width: 280px;height: 80px;"></image>
					<view class="text-4xl mt-2">BTCMax APP</view>
					<view class="text-2xl mt-8">{{$t('index.sssdqsjx')}}</view>
					<view class="text-xl mt-4" style="color: rgb(146, 146, 170);">{{$t('index.ljsmtxmxzazh')}}</view>
					<view class="flex gap-16 mt-6">
						<view class="flex items-center gap-16 rounded-full px-4 py-2 border relative erweima" style="border-color: #fff;">
							<view class="border rounded-full flex justify-center items-center" style="border-color: #fff;width: 30px;height: 30px;">
								<image src="/static/images/home/e1.png" style="width: 20px;height: 20px;"></image>
							</view>
							App Store
							<image src="/static/images/home/erweima1.png"  class="absolute left-0 opcity"  style="width: 160px;height: 160px;top: 60px;"></image>
						</view>
						<view class="flex items-center gap-16 rounded-full px-4 py-2 border relative erweima" style="border-color: #fff;">
							<view class="border rounded-full flex justify-center items-center" style="border-color: #fff;width: 30px;height: 30px;">
								<image src="/static/images/home/e2.png" style="width: 20px;height: 20px;"></image>
							</view>
							Android
							<image src="/static/images/home/erweima2.png" class="absolute left-0 opcity" style="width: 160px;height: 160px;top: 60px;"></image>
						</view>
					</view>
				</view>
				<view style="width: 640px;height: 490px;">
					<image src="/static/images/home/8.png" class="animate" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</view>
		
		<view class="py-10 px-5 my-10 text-center w-full" style="background: url(/static/images/home/9.png);">
			<view class="text-3xl">{{$t('index.BTCMaxsycnc')}}</view>
		</view>
		
		<view class="w-full py-20 flex flex-col items-center" style="background-color: rgb(35, 40, 54);">
			<view class="text-5xl">{{$t('index.ljksjy')}}</view>
			<view class="mt-8">
				<el-button type="primary" color="#54a450" round style="width: 128px;height: 42px;color: #fff;">{{$t('register.dengru')}}</el-button>
				<el-button type="primary" color="#0f4df5" round style="width: 128px;height: 42px;">{{$t('login.lijizhuce')}}</el-button>
			</view>
		</view>
		
		<footerPage></footerPage>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				table:{
					active:'0',
					btns:[
						{name:this.$t('index.zixuan'),id:'0',icon:''},
						{name:'USDT',id:'1',icon:'/static/images/home/icon1.svg'},
						{name:'BTC',id:'2',icon:'/static/images/home/icon2.png'},
						{name:'ETH',id:'3',icon:'/static/images/home/icon3.png'},
					],
					list:[
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
						{jiaoyi:'BTC/USDT',jiage:'102840',zdf:'-2.52%',},
					]
				},
				homeList: [{
						"pair": "BTC\/USDT",
						"price": 104363.5,
						"increase": 0.0021,
						"increaseStr": "+0.21%"
					},
					{
						"pair": "ETH\/USDT",
						"price": 2556.77,
						"increase": 0.0383,
						"increaseStr": "+3.83%"
					},
					{
						"pair": "EOS\/USDT",
						"price": 0.9315,
						"increase": 0.0587,
						"increaseStr": "+5.87%"
					},
					{
						"pair": "ETC\/USDT",
						"price": 20.4424,
						"increase": 0.0379,
						"increaseStr": "+3.79%"
					},
					{
						"pair": "USDC\/USDT",
						"price": 0.9999,
						"increase": 0.0002,
						"increaseStr": "+0.02%"
					},
					{
						"pair": "SHIB\/USDT",
						"price": 1.709e-5,
						"increase": 0.0816,
						"increaseStr": "+8.16%"
					},
					{
						"pair": "DOGE\/USDT",
						"price": 0.246659,
						"increase": 0.0875,
						"increaseStr": "+8.75%"
					},
					{
						"pair": "BCH\/USDT",
						"price": 417,
						"increase": 0.0239,
						"increaseStr": "+2.39%"
					},
					{
						"pair": "BSV\/USDT",
						"price": 41.8583,
						"increase": 0.0184,
						"increaseStr": "+1.84%"
					},
					{
						"pair": "LTC\/USDT",
						"price": 103.23,
						"increase": 0.0386,
						"increaseStr": "+3.86%"
					},
					{
						"pair": "TRX\/USDT",
						"price": 0.27217,
						"increase": 0.0438,
						"increaseStr": "+4.38%"
					},
					{
						"pair": "ADA\/USDT",
						"price": 0.834517,
						"increase": 0.0562,
						"increaseStr": "+5.62%"
					},
					{
						"pair": "IOTA\/USDT",
						"price": 0.2565,
						"increase": 0.0516,
						"increaseStr": "+5.16%"
					},
					{
						"pair": "LINK\/USDT",
						"price": 17.3951,
						"increase": 0.0465,
						"increaseStr": "+4.65%"
					},
					{
						"pair": "ATOM\/USDT",
						"price": 5.3712,
						"increase": 0.0254,
						"increaseStr": "+2.54%"
					},
					{
						"pair": "WTC\/USDT",
						"price": null,
						"increase": 0,
						"increaseStr": null
					},
					{
						"pair": "XTZ\/USDT",
						"price": 0.6961,
						"increase": 0.0561,
						"increaseStr": "+5.61%"
					},
					{
						"pair": "ETH\/BTC",
						"price": 0.024516,
						"increase": 0.0375,
						"increaseStr": "+3.75%"
					},
					{
						"pair": "BCH\/BTC",
						"price": 0.00383,
						"increase": 0.0118,
						"increaseStr": "+1.18%"
					},
					{
						"pair": "XTZ\/BTC",
						"price": null,
						"increase": 0,
						"increaseStr": null
					},
					{
						"pair": "ETC\/BTC",
						"price": null,
						"increase": 0,
						"increaseStr": null
					},
					{
						"pair": "EOS\/BTC",
						"price": null,
						"increase": 0,
						"increaseStr": null
					},
					{
						"pair": "WTC\/ETH",
						"price": null,
						"increase": 0,
						"increaseStr": null
					},
					{
						"pair": "EOS\/ETH",
						"price": null,
						"increase": 0,
						"increaseStr": null
					},
					{
						"pair": "XTZ\/ETH",
						"price": null,
						"increase": 0,
						"increaseStr": null
					}
				]
			}
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		methods: {
			// 点击表格按钮
			clickBtn(row,index){
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.erweima{
		cursor: pointer;
		.opcity{
			opacity: 0;
		}
		&:hover{
			.opcity{
				opacity: 1;
			}
		}
	}
	.line{
		width: 80px;height: 10px;background-color: #2266F4;
	}
	.activeBtn{
		background-color: #212833;
	}
	.tableBg{
		background-color: #212833;
	}
	.table-row:hover{
		transition:all 0.3s;
		transform: scale(1.05);background-color: #242E3C;
	}
	.chakangengd:hover{
		background-color: #fff;color: #000;
	}
	.animate {
		animation: movepoint-data 1.3s ease-in-out infinite alternate;
	}
	.homeList-animate{
		animation:scroll-data 90s linear 0s infinite;cursor: pointer;
	}
	.homeList-animate:hover {
	  animation-play-state: paused;
	}
	@keyframes movepoint-data {
		0% {
			transform: translate(0);
		}
	
		100% {
			transform: translateY(-20px);
		}
	}
	@keyframes scroll-data {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-75%);
		}
	}
</style>